<template>
  <div class="app-main"
       v-bind:style="{
       padding:viewInfo.divPadding + 'px',
       // backgroundImage: 'url(' + require('./../assets/index-bg.png') + ')'
       }">

      <el-container id="h_container">
        <el-aside id="h_aside_L"
                  v-bind:style="{
                  width: viewInfo.widthAside + 'px'}">
          <el-aside id="h_aside_UP"
                    v-bind:style="{
                    borderRadius:viewInfo.borderRd+'px 0px 0px 0px',
                    border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                    width: viewInfo.widthAside + 'px',
                    height: viewInfo.heightHeader + 'px',
                    backgroundColor:'#313384'}">
            <!--Logo-->
            <div class="main-logo">
              <i class="el-icon-date"></i>
              <span v-if="!sidebar.collapsed">
                <!--管理平台-->
                {{ $t('zl.sysm.name') }}
              </span>
            </div>
          </el-aside>
          <div
                v-bind:style="{
                height:viewInfo.hDivHeight+'px',
                borderLeft : viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl}">
          </div>
          <el-aside id="h_aside_CN"
                    v-bind:style="{
                    borderRadius:'0px 0px 0px 0px',
                    border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                    width: viewInfo.widthAside + 'px',
                    height: viewInfo.heightAside + 'px'}">
            <side-menu/>
          </el-aside>
          <div
                v-bind:style="{
                height:viewInfo.hDivHeight+'px',
                borderLeft : viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl}">
          </div>
          <el-aside id="h_aside_DN"
                    v-bind:style="{
                    borderRadius:'0px 0px 0px ' + viewInfo.borderRd + 'px',
                    border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                    width: viewInfo.widthAside + 'px',
                    height: viewInfo.heightFooter + 'px',
                    backgroundColor:'#ffffff'}">
            <!--操作-->
            <div class="handle-version">
              <!--V1.0-->
              {{ $t('zl.sysm.version') }}
            </div>
          </el-aside>
        </el-aside>

        <div v-on:click = "rSizeClick"
             v-bind:style = "{
             width: viewInfo.vDivWidth + 'px',
             borderBottom: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
             borderTop: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
             zIndex: '910'}">
        </div>

        <el-container id="h_main_R">
          <el-header id="h_header"
                     v-bind:style="{
                     borderRadius:'0px ' + viewInfo.borderRd + 'px 0px 0px',
                     border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                     height: viewInfo.heightHeader + 'px',
                     padding: '0px',
                     backgroundColor:'#313384'}">
            <!--头部-->
            <head-top></head-top>
          </el-header>

          <div
                v-bind:style="{
                height:viewInfo.hDivHeight+'px',
                borderRight : viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl}">
          </div>

          <el-main id="h_main"
                   v-bind:style="{
                   borderRadius:'0px 0px 0px 0px',
                   border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                   height: viewInfo.heightMain + 'px',
                   width: viewInfo.widthMain + 'px',
                   padding: '0px'}">
              <zl-router-tabs v-bind:style="{
                              height: viewInfo.zlRouterTabs + 'px',
                              padding: '0px'}"/>
              <div v-bind:style="{
                               borderRadius:'0px 0px 0px 0px',
                               height: (viewInfo.heightMain - viewInfo.borderWidth * 2) - viewInfo.zlRouterTabs + 'px',
                               padding: '0px',
                               width: '100%',
                               backgroundColor:'#ffffff'}">
                  <!--<keep-alive>-->
                    <!--<router-view/>-->
                  <!--</keep-alive>-->
                  <router-view/>
              </div>
          </el-main>

          <div
                v-bind:style="{
                height:viewInfo.hDivHeight+'px',
                borderRight  : viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl}">
          </div>

          <el-footer id="h_footer"
                     v-bind:style="{
                     borderRadius:'0px 0px ' + viewInfo.borderRd + 'px 0px',
                     border: viewInfo.borderWidth + 'px solid ' + viewInfo.borderCl,
                     height: viewInfo.heightFooter + 'px',
                     backgroundColor:'#ffffff',
                     padding: '0px'}">
            <!-- 底栏 -->
            <div class="main-footer">
              Copyright &copy; 2017-{{ viewInfo.fullYear }} <a href="javascript:void(0)">ZL</a>. All rights reserved.
            </div>
          </el-footer>

        </el-container>
      </el-container>

  </div>  <!--.app-main end-->

</template>

<script>
import { mapMutations, mapGetters } from 'vuex'
import types from '../store/mutation-types'
import { getSessionKey } from '../utils/utils'
import lodash from 'lodash'

export default {
  data () {
    return {
      viewInfo: {
        // 屏幕高度
        screenHeight: document.body.clientHeight,
        // 屏幕宽度
        screenWidth: document.body.clientWidth,
        // .app-main padding
        divPadding: 0,
        // 头部底部高度
        heightFooter: 16,
        heightHeader: 50,
        // 内容和侧边高度 默认600
        heightMain: 600,
        heightAside: 600,
        // 内容区宽度
        widthMain: 600,
        // div 水平垂直高宽
        hDivHeight: 0,
        vDivWidth: 0,
        // 边框 边框转角 边框颜色
        borderWidth: 0,
        borderRd: 0,
        borderCl: '#ffffff',
        // 侧边宽 是否打开
        widthAside: 200,
        zlRouterTabs: 56,
        isZoomAside: true,
        fullYear: new Date().getFullYear()
      }
    }
  },
  mounted () {
    this.rSize()
    this.computedHeight(this.viewInfo.screenHeight)
    this.computedWidth(this.viewInfo.screenWidth)
    // 浏览器调度变化修改screenHeight
    window.onresize = () => {
      return (() => {
        this.viewInfo.screenHeight = document.body.clientHeight
        this.viewInfo.screenWidth = document.body.clientWidth
      })()
    }
    this.setViewInfo(this.viewInfo)
    this.$router.push('home')
  },
  watch: {
    // 监听 viewInfo.screenHeight 变化计算高度
    'viewInfo.screenHeight' (valHeight) {
      this.debouncedGetComputedHeight(valHeight)
    },
    // 监听 viewInfo.screenWidth 变化计算宽度
    'viewInfo.screenWidth' (valWidth) {
      this.debouncedGetComputedWidth(valWidth)
    }
  },
  created: function () {
    this.debouncedGetComputedHeight = lodash.debounce(this.computedHeight, 0)
    this.debouncedGetComputedWidth = lodash.debounce(this.computedWidth, 0)
  },
  methods: {
    ...mapMutations({
      // 侧边开关
      setSidebar: types.PERMISSION + types.FS + types.SIDEBAR,
      // 屏幕信息
      setViewInfo: types.PERMISSION + types.FS + types.VIEW_INFO,
      // 屏幕信息
      setTabsRouter: types.PERMISSION + types.FS + types.TABS_ROUTER,
      // 屏幕信息 ScreenWidth
      setScreenWidth: types.PERMISSION + types.FS + types.VIEW_INFO_SCREEN_WIDTH,
      // 屏幕信息 ScreenHeight
      setScreenHeight: types.PERMISSION + types.FS + types.VIEW_INFO_SCREEN_HEIGHT
    }),
    ...mapGetters({
      // 侧边开关
      sidebar: types.PERMISSION + types.FS + types.SIDEBAR
    }),
    /** 根据屏幕计算高度 */
    computedHeight (valHeight) {
      this.viewInfo.screenHeight = valHeight
      this.viewInfo.heightAside = this.viewInfo.screenHeight - this.viewInfo.heightHeader - this.viewInfo.divPadding - this.viewInfo.divPadding - this.viewInfo.heightFooter - this.viewInfo.hDivHeight - this.viewInfo.hDivHeight
      this.viewInfo.heightMain = this.viewInfo.screenHeight - this.viewInfo.heightHeader - this.viewInfo.divPadding - this.viewInfo.divPadding - this.viewInfo.heightFooter - this.viewInfo.hDivHeight - this.viewInfo.hDivHeight
      this.setViewInfo(this.viewInfo)
    },
    /** 根据屏幕计算宽度 */
    computedWidth (valWidth) {
      this.viewInfo.screenWidth = valWidth
      this.viewInfo.widthMain = this.viewInfo.screenWidth - this.viewInfo.widthAside - this.viewInfo.vDivWidth
      this.setViewInfo(this.viewInfo)
    },
    /** 侧边开关事件  */
    rSizeClick () {
      this.sidebar.collapsed = !this.sidebar.collapsed
      this.setSidebar(this.sidebar.collapsed)
      this.setViewInfo(this.viewInfo)
      this.rSize()
    },
    /** 重置侧边宽度  */
    rSize () {
      let sscollapsed = JSON.parse(getSessionKey('state.sidebar.collapsed', false))
      this.sidebar.collapsed = sscollapsed
      if (this.sidebar.collapsed) {
        this.viewInfo.widthAside = 68
      } else {
        this.viewInfo.widthAside = 200
      }
    }
  }
}
</script>

<style>
  .main-footer {
    text-align: center;
    color: #444;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
  }
  .handle-version {
    text-align: center;
    color: #2f5cb0;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
  }
  .main-logo {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 20px;
    color: #ffffff;
  }
</style>
